<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-card class="box-card">
      <el-button type="primary" @click=" dialogAddRoles=true ">添加角色</el-button>
      <el-table :data="roles" style="width: 100%" border>
        <el-table-column type="expand" label="明细">
          <template>
            <el-table el-table empty-text=" ">
              <el-table-column> </el-table-column>
              <el-table-column> </el-table-column>
              <el-table-column> </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
        <el-table-column label="操作" prop="desc" width="300">
            <template #default="{ row }">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="openModifyRoles(row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="RemoveRoles(row)">删除</el-button>
                <el-button type="warning" icon="el-icon-setting" size="mini" @click="openDistributeRithts(row.id,row.children)">分配权限</el-button>
            </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改角色 -->
    <el-dialog title="修改角色" :visible.sync="dialogModifyRoles">
            <el-form ref="modifyform" :model="modifyRoles" :rules="$rules.user" >
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
                    <el-input v-model="modifyRoles.roleName" autocomplete="off"  ></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
                    <el-input v-model="modifyRoles.roleDesc" autocomplete="off" ></el-input>
                </el-form-item>
            </el-form>
            <template v-slot:footer class="dialog-footer">
                <el-button @click="dialogModifyRoles = false">取 消</el-button>
                <el-button type="primary" @click="ModifyRoles()">确 定</el-button>
            </template>
      </el-dialog>
    <!-- 增加新角色 -->
    <el-dialog title="添加角色" :visible.sync="dialogAddRoles">
            <el-form ref="modifyform" :model="addRoles" :rules="$rules.user" >
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
                    <el-input v-model="addRoles.roleName" autocomplete="off"  ></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
                    <el-input v-model="addRoles.roleDesc" autocomplete="off" ></el-input>
                </el-form-item>
            </el-form>
            <template v-slot:footer class="dialog-footer">
                <el-button @click="dialogAddRoles = false">取 消</el-button>
                <el-button type="primary" @click="AddRoles()">确 定</el-button>
            </template>
      </el-dialog>
      <!-- 重新分配权限 -->
       <el-dialog title="添加角色" :visible.sync="dialogDistributeRights">
            <el-tree show-checkbox node-key="id" :data="rights"
            :props="{label:'authName'}" default-expand-all
            ref="rightsTree">
            </el-tree>
            <template v-slot:footer class="dialog-footer">
                <el-button @click="dialogDistributeRights = false">取 消</el-button>
                <el-button type="primary" @click="getNewRights()">确 定</el-button>
            </template>
      </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogDistributeRights:false,
      dialogModifyRoles: false,
      dialogAddRoles:false,
      roles: [],
      modifyRoles: {
        roleDesc:"",
        roleName:""
      },
      addRoles:{
        
      },
      rights:[],
      rightsId:[],
      formLabelWidth:"120px"
    };
  },
  methods: {
    // 初始化渲染页面
    async LoadRoles() {
      let result = await this.$api.getRoles();
      this.roles = result;
    },
    // 打开修改角色模态框
    openModifyRoles(row){
      this.dialogModifyRoles=true;
      this.modifyRoles=row
    },
    // 修改已存在角色
  async  ModifyRoles(){
      try {
        await this.$api.reviseRoles(this.modifyRoles.id,this.modifyRoles)
        this.dialogModifyRoles=false;
      } catch (error) {
        // console.log(error)
      }
    },
    // 删除角色
  async  RemoveRoles(row){
      try {
        await this.$api.deleteRoles(row.id)
        this.LoadRoles();
      } catch (error) {
        // console.log(error)
      }
    },
    // 增加新角色
  async  AddRoles(){
      try {
        await this.$api.increaseRoles(this.addRoles)
        this.dialogAddRoles=false;
        this.LoadRoles();
      } catch (error) {
         // console.log(error)
      }
    },
    // 打开重新分配权限模态框
    openDistributeRithts(rid,right){
      console.log(rid,right)
        let key=[]
        for(let one of right){
            for(let two of one.children){
                for(let three of two.children){
                    key.push(three.id)
                }
            }
        }
        this.dialogDistributeRights=true;
        this.$nextTick(()=>{
          this.$refs.rightsTree.setCheckedKeys(key)
        })
    },
    // 获取新分配权限
    getNewRights(){
        let rightIds = this.$refs.rightsTree.getCheckedKeys();
        let halfRightIds = this.$refs.rightsTree.getHalfCheckedKeys();
        let rightsStr = rightIds.concat( halfRightIds ).join(",");
        console.log(rightIds,halfRightIds,rightsStr);
        this.dialogDistributeRights=false
    },
    // 加载权限值
     async  LoadRights(){
        let result=await this.$api.getRigths('tree')
        this.rights=result
        // console.log(result);
      }
  },
  created() {
    this.LoadRoles();
    this.LoadRights();
  },
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}
.el-button {
  margin-bottom: 20px;
}
</style>